<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03计算器练习</title>
</head>
<body>
<input type="text" placeholder="请输入数字1" id="i1"><br>
<input type="text" placeholder="请输入数字2" id="i2"><br>
<button onclick="calc('+')">加</button>
<button onclick="calc('-')">减</button>
<button onclick="calc('*')">乘</button>
<button onclick="calc('/')">除</button>
<h4>运算结果：<span class="s"></span></h4>

<script>
    function calc(o){
        var n1 = document.getElementById('i1');
        var n2 = document.getElementById('i2');
        console.log(n1.value,typeof n1.value);
        console.log(n2.value);
         n1 = parseFloat(i1.value);
        console.log(n1,typeof n1);
        n2 = parseFloat(i2.value);
        let  l4 = document.querySelector(".s");
        switch (o){
            case '+' :
                l4.innerHTML = n1+n2;break;
            case '-' :
                l4.innerHTML = n1-n2;break;
            case '*' :
                l4.innerHTML = n1*n2;break;
            case '/' :
                if(n2!=0){
                    l4.innerHTML = n1/n2;
                }else{
                    alert('除数不能等于零')
                }
        }
    }
</script>
</body>
</html>